<template>
    <div class="components_edit_modal">
        <el-dialog width="1000px" :title="title" :visible.sync="state" :show-close="true" :close-on-click-modal="false">
            <el-form ref="userInfo" :model="userInfo" :rules="rules"  :inline="true" label-width="90px">
                <el-form-item label="用户名：" prop="login">
                    <el-input v-model.trim="userInfo.login" placeholder="请输入用户名"></el-input>
                </el-form-item>

                <el-form-item label="姓名：" prop="lastName">
                    <el-input v-model.trim="userInfo.lastName" placeholder="请输入姓名"></el-input>
                </el-form-item>

                <el-form-item label="昵称：" prop="nickname">
                    <el-input v-model.trim="userInfo.nickname" placeholder="请输入昵称"></el-input>
                </el-form-item>

                <el-form-item label="生日：" prop="birthday">
                    <!-- <el-input v-model.trim="userInfo.birthday"></el-input> -->
                    <el-date-picker
                        v-model="userInfo.birthday"
                        type="date"
                        placeholder="请选择日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="性别：" prop="sex">
                    <!-- <el-input v-model.trim="userInfo.sex"></el-input> -->
                    <el-radio v-model="userInfo.sex" label="1">男</el-radio>
                    <el-radio v-model="userInfo.sex" label="2">女</el-radio>
                </el-form-item>

                <el-form-item label="封面图片：" prop="avatarUrl" class="inline-block">
                    <pl-upload
                        :initionData="attachment"
                        :api="'jstn-avatar'"
                        :imageOnly="false"
                        :multiFile="false"
                        :buttonIds='{select:"selectfiles1",upload:"postfiles1",container:"container1"}'
                        @reloadFiles="reloadFiles" ></pl-upload>
                </el-form-item>

                <el-form-item label="个性签名：" prop="slogan" class="inline-block">
                    <el-input type="textarea" v-model.trim="userInfo.slogan" placeholder="请输入个性签名"></el-input>
                </el-form-item>

                <el-form-item label="地址：" prop="address" class="inline-block">
                    <el-input type="textarea" v-model.trim="userInfo.address" placeholder="请输入地址"></el-input>
                </el-form-item>

                <el-form-item label="管理员：" prop="isSuperuser">
                    <!-- <el-input v-model.trim="userInfo.isSuperuser"></el-input> -->
                    <el-switch
                        v-model="userInfo.isSuperuser"
                    >
                    </el-switch>
                </el-form-item>

                <!-- <el-form-item label="连续签到天数：" prop="signDays">
                    <el-input v-model.trim="userInfo.signDays"></el-input>
                </el-form-item>

                <el-form-item label="抽奖次数：" prop="lotteryCount">
                    <el-input v-model.trim="userInfo.lotteryCount"></el-input>
                </el-form-item>

                <el-form-item label="预留姓名：" prop="drawName">
                    <el-input v-model.trim="userInfo.drawName"></el-input>
                </el-form-item>

                <el-form-item label="预留生日：" prop="drawBirthday">
                    <el-input v-model.trim="userInfo.drawBirthday"></el-input>
                </el-form-item>

                <el-form-item label="预留手机号：" prop="drawPhone">
                    <el-input v-model.trim="userInfo.drawPhone"></el-input>
                </el-form-item> -->

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="">确 定</el-button>
                <el-button @click="state = false"  size="small">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {enums} from '@/constant'
    import PlUpload from "../../../common/PlUpload"
    export default {
        components: {
            "pl-upload":PlUpload
        },
        data() {

            return {
                state: false,
                title: '',
                type:'',
                imageUrl: '',
                attachment:[],//上传附件
                userInfo:{
                    login: null,
                    lastName: null,
                    nickname: null,
                    birthday: null,
                    sex: null,
                    slogan: null,
                    address: null,
                    isSuperuser: null,
                    avatarUrl: null,
                    signDays: null,
                    lotteryCount: null,
                    drawName: null,
                    drawBirthday: null,
                    drawPhone: null
                },
                rules: {
                    type: [
                        { required: true, message: '请输入字典类型', trigger: 'blur'}
                    ],
                    dictValue: [
                        { required: true, message: '请输入字典名称', trigger: 'blur'}
                    ],
                    description: [
                        // { required: true, message: '请输入字典描述', trigger: 'blur'}
                    ],
                    dictKey: [
                        { required: true, message: '请输入字典值', trigger: 'blur'}
                    ]
                },
            }
        },
        created() {

        },
        mounted() {},
        methods: {
            showDialog(val){

                if(this.$refs['userInfo']!==undefined){
                    this.$refs['userInfo'].resetFields();
                }

                if(val){
                    for(var key in val){
                       this.userInfo[key] = val.userProfile[key];
                    }
                    this.title = "编辑用户";
                    this.type = "edit";
                }else{
                    this.title = "添加用户";
                    this.type = "add";
                }

                this.state = true;
            },
            handleAvatarSuccess(res, file) {
                console.log("res, file");
                console.log(res, file);
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                  this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                  this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            adduserInfo(){
                let vm = this;
                vm.$refs.userInfo.validate((valid) => {
                    if (valid) {

                        let submission =  ''; //提交方式

                        //选择提交方式
                        if(type == 'edit'){
                            submission = 'put';
                        }else{
                            submission = 'post';
                        }
                        // 提交
                        this.axios({
                            method: submission,
                            url: api.userInfo.dictHandle,
                            data: vm.userInfo
                        }).then((response) => {
                            if (response.data.code == 200) {
                                vm.state = false;
                                vm.$parent.$refs.userInfoTable.$emit('vuetable:refresh');
                                vm.$message.success(response.data.message);
                            } else {
                                vm.$message.error(response.data.message);
                            }
                        })
                    }else{
                        return false;
                    }
                });
            },
            reloadFiles: function (files) {
                let vm = this;
                this.attachment = [];
                files.forEach((item,idnex)=>{
                    let model = {
                        fileRealName: item.fileRealName,
                        objectKey: item.object
                    }
                    this.attachment.push(model)
                })
                console.log("this.attachment");
                console.log(this.attachment);
            },
        },


    };
</script>
<style scoped>
/* .el-form--inline .el-form-item__content{ width: 220px; } */
</style>